<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 这个是三行内容，左侧的label，因为字数长度不一致导致宽度不一致。我需要使用css统一设置左侧label的宽度为最长的label数据的长度。使右侧的数据可以上下对齐，右侧数据可以换行显示的 -->
    <!-- <style>
      .columns-right {
        width: 300px;
      }

      .grid-item {
        display: grid;
        grid-template-columns: 100px 1fr; /* 第一列根据内容最大宽度，第二列占据剩余空间 */
        gap: 8px;
        align-items: center;
      }

      .label {
        white-space: nowrap; /* 防止标签换行 */
      }

      .value {
        word-break: break-word; /* 或使用 overflow-wrap: break-word; */
      }
    </style><div class="columns-right">
      <div class="grid-item">
        <span class="label">英文：</span>
        <span class="value">{{moduleInfo.res_idle_time_tips_en_us}}</span>
      </div>
      <div class="grid-item">
        <span class="label">简体中文：</span>
        <span class="value">{{moduleInfo.res_idle_time_tips_zh_cn}}</span>
      </div>
      <div class="grid-item">
        <span class="label">繁体中文：</span>
        <span class="value">{{moduleInfo.res_idle_time_tips_zh_hk}}</span>
      </div>
    </div> -->
    <style>
      .grid-container {
        display: grid;
        /* grid-template-columns: repeat(1, max-content 1fr); 两列布局 */
        grid-template-columns: max-content 1fr;
        /* grid-template-columns: minmax(max-content, 100px) 1fr; */
        gap: 8px; /* 设置行和列间距 */
      }

      .label {
        /* 确保所有标签在第一列 */
        grid-column: 1;
        /* 可选：使标签加粗 */
        font-weight: bold;
        /* 防止标签换行 */
        /* white-space: nowrap; */
        overflow: hidden; /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 溢出内容显示为省略号 */
        max-width: 100px; /* 确保最大宽度不超过 100px */
      }

      .value {
        /* 确保所有值在第二列 */
        grid-column: 2;
        /* 或使用 overflow-wrap: break-word; */
        word-break: break-word;
      }
    </style>
    <div class="columns-right">
      <div class="grid-container">
        <div class="label">英文：</div>
        <div class="value">{{moduleInfo.res_idle_time_tips_en_us}}</div>
        <div class="label">
          简体中文:-简体中文简体中文简体中文简体中文简体中文简体中文简体中文简体中文
        </div>
        <div class="value">{{moduleInfo.res_idle_time_tips_zh_cn}}</div>
        <div class="label">繁体中文：</div>
        <div class="value">{{moduleInfo.res_idle_time_tips_zh_hk}}</div>
      </div>
    </div>
  </body>
</html>
